<template>
  <div>
    <ul>
      <router-link to="/theater/1/abc/zs" tag="li">comp1</router-link>
      <router-link to="/theater/2/abc/ls" tag="li">comp2</router-link>
    </ul>
    <div>
      {{id}} {{name}}
      <button @click="handleClick">go to movie</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      name: ''
    }
  },

  // beforeRouteUpdate() {
  //   console.log(this.$route.params.id)
  // }

  methods: {
    handleClick() {
      this.$router.push({
        name: 'movie'
      })
    }
  },

  watch: {
    $route: {
      handler(route) {
        let {id, name} = route.params
        this.id = id
        this.name = name
      },
      immediate: true
    }
  }
}
</script>

<style lang='stylus' scoped>

</style>